import FieldComponent from "../FieldComponent";
import { useForm } from "../../framework/common/context/metadata-context";
import clsx from "clsx";
import { diffStyle } from "../../framework/common/utils/diffStyle";
import RemarkTip from "../RemarkTip";
import eventBus from "../../framework/common/eventBus";
import React, { useRef } from "react";
import { isMouseInDomRect } from "../../framework/common/utils";
import useOperationConnect from "../../framework/common/lifecycle/useOperationConnect";

export default function ({ groupRef, group, cell, mainField, width = 0, scale, ...cellProperties }) {
  const metadataManager = useForm();
  const isPrint=(metadataManager.mode==="Print")
  let cellData = cell.data?.[0];
  const t1Ref = useRef();
  const t2Ref = useRef();

  const operationConnector = useOperationConnect(
    () => t2Ref.current?.getBoundingClientRect(),
    () => {
      let t1Rect = t1Ref.current?.getBoundingClientRect();
      let t2Rect = t2Ref.current?.getBoundingClientRect();
      return {
        width: (t1Rect?.width || 0) + (t2Rect?.width || 0),
        height: t1Rect?.height || t2Rect?.height,
        left: t1Rect?.left || t2Rect?.left,
        top: t1Rect?.top || t2Rect?.top,
      };
    },
    {
      group: group,
      type: "cell-main",
      cell: cell,
    }
  );

  //需要code,并且不是空白列
  if (cellData && cellData.code&&cellData.code?.indexOf('empty_____')!==0) {
    //生成配置的样式
    let fieldTitleStyle = cellData?.designProps?.styleData?.fieldTitleStyle; //字段lable样式
    let fieldClsName = diffStyle(fieldTitleStyle, "fieldTitleStyle"); //根据配置得到lable的className
    if (!fieldClsName) {
      fieldClsName = metadataManager.fieldClsName; //没有自定义样式，就用全局的
    }
    let fieldContentStyle = cellData?.designProps?.styleData?.fieldContentStyle; //字段value样式
    let fieldValueClsName = diffStyle(fieldContentStyle, "fieldContentStyle"); //根据配置得到value的className
    if (!fieldValueClsName) {
      fieldValueClsName = metadataManager.fieldValueClsName; //没有自定义样式，就用全局的
    }
    // let isDefaultRequired=false;
    // if(metadataManager.isDisplay!==true){
    //   if(cellData.isRequired===false){
    //     isDefaultRequired=false
    //   }
    //   else if(cellData.isRequired===true || cellData.is_required===true){
    //     isDefaultRequired=true
    //   }
    // }

    let isDefaultRequired = (cellData.isRequired === true || cellData.is_required === true) && metadataManager.isDisplay !== true;

    let contentStyle = {};
    //label
    let cellLabel = null;
    //content
    let cellContent = null;
    //如果Hidden规则计算不会被隐藏
    if (cell.isHidden !== true) {
      cellLabel = (
        <>
          {cellData.designProps?.title || null}
          <RemarkTip codePath={"form.data_range.main." + cellData.code}></RemarkTip>
        </>
      );
      cellContent = <FieldComponent cell={cellData} codePath={mainField + cellData.code} isSubTableField={false}></FieldComponent>;
    }

    //规则标题Style
    let titleStyle = cell.titleStyle || {};
    //规则内容Style
    let valueStyle = cell.contentStyle || {};

    //表单字段无Label模式
    if (cellData.designProps?.layout === "control_layout_noTitle") {
      if (cellProperties.colSpan && cellProperties.colSpan > 1) {
        cellProperties.colSpan = (cellProperties.colSpan || 1) * 2;
      } else {
        cellProperties.colSpan = 2;
      }
      contentStyle.maxWidth = contentStyle.width = width * scale + "px";
      // cellProperties.colSpan = cellProperties.colSpan + 1;
      let tipCls = "";
      if (cellData.type === "tip") {
        tipCls = "pl-0";
      }
      return (
        <>
          <td
            ref={t2Ref}
            {...operationConnector}
            data-code={cellData.code}
            data-type={cellData.type}
            className={clsx("ctl-content", fieldValueClsName, tipCls)}
            style={{ ...contentStyle, ...valueStyle }}
            {...cellProperties}
          >
            {cellContent}
          </td>
        </>
      );
    }
    //表单字段标题内容默认的上下布局模式
    if (cellData.designProps?.layout === "control_layout_upDown") {
      if (cellProperties.colSpan && cellProperties.colSpan > 1) {
        cellProperties.colSpan = (cellProperties.colSpan || 1) * 2;
      } else {
        cellProperties.colSpan = 2;
      }

      if(metadataManager.mode!=="Print"){
        contentStyle.maxWidth = width * scale + "px";
      }
      return (
        <>
          <td ref={t2Ref} {...operationConnector} {...cellProperties}>
            <div
              className={clsx("min-h-40px ctl-title", fieldClsName, isDefaultRequired && "runtime-form-required")}
              style={{ marginLeft: "-6px", marginTop: "-1px", marginRight: "-6px", ...titleStyle }}
            >
              {cellLabel}
            </div>
            <div className={clsx("min-h-40px leading-40px ctl-content", fieldValueClsName)} style={{ marginLeft: "-6px", marginBottom: "-1px", marginRight: "-6px", ...contentStyle, ...valueStyle }}>
              {cellContent}
            </div>
          </td>
        </>
      );
    }
    //表单字段标题内容默认的左右布局模式
    if (cellProperties.colSpan && cellProperties.colSpan > 1) {
      //每个cell会被拆解成2个td
      cellProperties.colSpan = ((cellProperties.colSpan || 1) - 1) * 2 + 1;
    }
    let labelWidth = cellData.designProps?.title_w || 85;
    if (width) {
      contentStyle.maxWidth = contentStyle.width = width * scale - labelWidth + "px";
    }

    return (
      <>
        <td
          ref={t1Ref}
          {...operationConnector}
          className={clsx("ctl-title", fieldClsName, isDefaultRequired && "runtime-form-required")}
          style={{ ...{ width: labelWidth + "px" }, ...titleStyle }}
          rowSpan={cellProperties.rowSpan}
        >
          {cellLabel}
        </td>
        <td
          ref={t2Ref}
          {...operationConnector}
          data-code={cellData.code}
          data-type={cellData.type}
          className={clsx("ctl-content", fieldValueClsName)}
          style={{ ...contentStyle, ...valueStyle }}
          {...cellProperties}
        >
          {/*主表cell取 cell.data[0]*/}
          {cellContent}
        </td>
      </>
    );
  }

  //空白列label和value合并
  if (cellProperties.colSpan === undefined) {
    cellProperties.colSpan = 1;
  }
  cellProperties.colSpan += 1;
  let contentStyle = {
    width: width * scale + "px",
    maxWidth: width * scale + "px",
  }; //没有内容的列，只需要设置配置的宽度
  
  //打印模式空合并列不显示
  //
  // if(isPrint&&cellProperties?.colSpan>1&&width===0){
  //   return  <td ref={t2Ref} className="hidden "></td>
  // }
  return <td ref={t2Ref} {...operationConnector} {...cellProperties} style={{ ...contentStyle }}></td>;
}
